<template>
    <div class="query-statement">
        <!-- 头部搜索框 -->
        <div class="query-top ">
            <div class="top-title clearfix">
                <p class="fl">健康档案查询</p>
                <router-link class="upload fr" to="/queryStatement/upload">我上传的记录</router-link>
            </div>

            <div class="top-content">
                <div class="top-con-middle clearfix">
                    <Input v-model="searchVIN" @on-enter="search" :maxlength='17' placeholder="输入车架号/VIN号搜索" class="search-vin fl"></Input>
                    <Button @click="search" :loading='btnLoading' type="primary" class="search-btn fl">搜&nbsp;索</Button>
                </div>
                <div class="input-tip">已输入{{searchVIN.length}}位，还差{{17-searchVIN.length}}位</div>
            </div>
        </div>
        <!-- 下部查询列表 -->
        <div class="query-bottom">
            <div class="bottom-title">查询结果</div>
            <div v-if="tableData.length== 0" class="no-data">暂无该车辆的健康档案数据</div>
            <!-- 列表 -->
            <div v-if="tableData.length> 0" class="query-list">
                <Table @on-sort-change='sortChange' :loading="tableLoading" :data="tableData" :columns="tableCol" stripe></Table>
                <!-- 分页器 -->
                <div>
                    <pagination :total="totalPage" :current="currentPage" :pageSize='pageSize' @change="changePage"></pagination>
                </div>
            </div>

            <!-- <div class="apply-auth ">  授权的先不做
                <p>该车辆还有{{tableData.length-3}}条维修记录，向车主申请授权后即可查看
                    <Button class="apply-btn" type='text'> 申请授权</Button>
                </p>
            </div> -->
        </div>
    </div>
</template>

<script>
import pagination from './../../commons/pagination'

export default {
    components: { pagination },
    data() {
        const validateVIN = (rule, value, callback) => {
            if (!value) return callback(new Error('请输入正确的VIN码'));
            else if (!this.$utils.RegexUtils('AN', value)) return callback(new Error('请输入正确的VIN码'));
        };
        return {
            // 头部搜索框
            searchVIN: '',// input
            btnLoading: false, // btn

            // 下部列表
            tableLoading: false, // table加载
            // tableData: [{ // table数据
            //     sheetNum: '',
            //     plateNo: '',
            //     repairType: '',
            //     countDate: '',
            //     finishDate: '',
            //     uploadDate: '',
            // }],
            tableData: [],
            tableCol: [  // 表头设置
                {
                    key: 'sheetNum',
                    title: '维修结算单编号',
                    align: 'center'
                },
                {
                    title: '车牌号码',
                    key: 'plateNo',
                    align: 'center'
                },
                {
                    title: '维修类型',
                    key: 'repairType',
                    align: 'center'
                },
                {
                    title: '结算日期',
                    key: 'countDate',
                    align: 'center',
                    sortable: 'custom',
                    sortType: 'desc'
                },
                {
                    title: '标准化完成时间',
                    key: 'finishDate',
                    align: 'center',
                    sortable: 'custom',
                    sortType: 'desc'
                },
                {
                    title: '上传时间',
                    key: 'uploadDate',
                    align: 'center',
                    sortable: 'custom',
                    sortType: 'desc'
                },
                {
                    title: '操作',
                    key: 'check',
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: { type: 'text' },
                                style: { border: '0px', color: '#25BDFF' },
                                on: {
                                    click: () => {
                                        this.$router.push({ path: '/queryStatement/check', query: { id: params.row._id } })
                                    }
                                }
                            }, '查看详情')
                        ]);
                    }
                }
            ],

            // 分页器
            totalPage: 100, // 总信息数
            currentPage: 1, // 当前页码
            pageSize: 10,  // 当前页显示信息数
        }
    },
    // mounted() { this.search() },
    methods: {
        // 列表渲染假数据
        mockTableData() {
            this.tableLoading = true
            let data = [];
            let len = this.pageSize ? this.pageSize : 10
            for (let i = 0; i < len; i++) {
                data.push({
                    sheetNum: 'fakeData1230120300000' + Math.floor(Math.random() * 100 + 1),
                    plateNo: 'fakeData粤ABCC' + Math.floor(Math.random() * 100 + 1),
                    repairType: 'fakeDataJHDGDPKHDBV129307' + Math.floor(Math.random() * 100 + 1),
                    countDate: new Date(new Date().getTime() - Math.random() * 1000000000).Format("yyyy-MM-dd"),
                    finishDate: new Date(new Date().getTime() - Math.random() * 1000000000).Format("yyyy-MM-dd HH:mm:ss"),
                    uploadDate: new Date(new Date().getTime() - Math.random() * 1000000000).Format("yyyy-MM-dd HH:mm:ss"),
                    _id: '1000' + Math.floor(Math.random() * 10000 + 1),
                })
            }
            this.loading()
            this.tableData = data
        },
        // 获取数据 
        search() {
            let account = this.$utils.Storage.getObj('B_ACCOUNT');
            this.btnLoading = true
            this.tableLoading = true
            // if (this.searchVIN) { ajaxData.startDate = this.searchVIN }
            this.mockTableData()
            this.$ajax(this.$api.statement.maintenaceList, { VINCode: this.searchVIN }, res => {
                console.log('res', res);
                this.loading()
            }, (error) => { this.loading() })
        },
        // table加载中
        loading() {
            setTimeout(() => {
                this.btnLoading = false
                this.tableLoading = false
            }, 1000)
        },
        // 列表头 事故发生日期筛选
        sortChange(colObj) {
            console.log('colObj', colObj.key);
            // console.log('colObj',colObj.uploadDate);
            // if (colObj.order == 'normal') { this.sort = 'desc' }
            // else this.sort = colObj.order
            this.search()
        },
        // 分页器改变时
        changePage() {
            this.search()
            // this.search()
        },
    }
}
</script>

<style lang="less" >
.query-statement {
  margin: 30px;
  .query-top {
    background-color: #fff;
    // background-color: @color-Background;
    .top-title {
      height: 50px;
      border-bottom: 1px solid @color-Border;
      padding: 0 30px;
      line-height: 50px;
      p {
        font-size: 16px;
      }
      .upload {
        color: @color-Primary;
        font-size: 14px;
        color: #2d8cf0;
      }
    }
    .top-content {
      height: 174px;
      padding-top: 50px;
      .top-con-middle {
        height: 44px;
        margin: 0 auto;
        width: 500px;
        .search-vin {
          width: 400px;
          line-height: 22px;
          color: rgba(187, 190, 196, 1);
          font-size: 16px;
          .ivu-input {
            height: 44px !important;
            font-size: 16px;
            line-height: 22px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
          }
        }
        .search-btn {
          display: inline-block;
          width: 100px;
          height: 44px;
          font-size: 18px;
          border-top-left-radius: 0px;
          border-bottom-left-radius: 0px;
        }
      }
      .input-tip {
        height: 20px;
        line-height: 20px;
        color: rgba(255, 153, 0, 1);
        font-size: 14px;
        text-align: center;
        margin-top: 10px;
      }
    }
  }

  .query-bottom {
    background-color: #fff;
    margin-top: 20px;
    // padding: 10px;
    .bottom-title {
      height: 50px;
      line-height: 50px;
      font-size: 16px;
      color: #1c2438;
      padding: 0 30px;
      border-bottom: 1px solid @color-Border;
    }
    .query-list {
      padding: 25px;
    }
    .pagination {
      padding-bottom: 0;
    }
    .no-data {
      padding: 30px;
      text-align: center;
    }
    .apply-auth {
      height: 42px;
      line-height: 42px;
      text-align: center;
      border: 2px dashed @color-Border;
      border-radius: 4px;
      margin: 5px 10px;
      .apply-btn {
        border: 0px;
        color: #25bdff;
      }
    }
  }
}
</style>

